<template>
  <div class="tenant-container">
    <el-row class="nav">
      <el-col :span="22">
        <el-row>
          <el-col :span="1"><div class="avatar" /></el-col>
          <el-col :span="20">
            <div class="infoBox">
              <div>{{ account }}</div>
              <div>{{ bindingAccount }} <span>{{ $t('tenant.setting') }}</span></div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="2" style="cursor:pointer">
        <span @click="handleLoginOut">{{ $t('login.loginOut') }}</span>
      </el-col>
    </el-row>
    <div class="tenantWrap">
      <div v-if="tenantStatus === 'NOTFOUND' || tenantStatus==='REJECTED'" class="tenantMain-container">
        <h2 v-if="tenantStatus==='NOTFOUND'">{{ $t('tenant.tenantIndexTitle') }}</h2>
        <div v-if="tenantStatus==='REJECTED'" style="text-align:center;color:red">{{ $t('tenant.AuditReject') }}</div>
        <div>
          <h3>{{ $t('tenant.tenantTitle') }}</h3>
          <div>
            <el-row>
              <el-col :span="2" style="width:140px">{{ $t('tenant.tenantType') }}：</el-col>
              <el-col :span="18">
                <el-select v-model="value" style="width:100%" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-col>
            </el-row>
            <el-row style="margin-top:20px">
              <el-col :span="2" style="width:140px">{{ $t('tenant.tenantName') }}：</el-col>
              <el-col :span="18"><el-input v-model="tenantUserName" /></el-col>
            </el-row>
          </div>
        </div>
        <div>
          <h3>{{ $t('tenant.productTitle') }}</h3>
          <div>
            <el-row>
              <el-col :span="2" style="width:140px">{{ $t('tenant.saleProductType') }}：</el-col>
              <el-col :span="18">
                <template>
                  <el-radio v-model="radio" label="true">YES</el-radio>
                  <el-radio v-model="radio" label="false">NO</el-radio>
                </template>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="wrap">
          <el-button :loading="createLoading" type="primary" class="submitBtn" @click="handleCreate">{{ $t('tenant.submitAudit') }}</el-button>
        </div>
      </div>
      <div v-if="tenantStatus==='PASSED'">
        <el-row>
          <h2>{{ tenantUserName }}</h2>
        </el-row>
        <el-row><el-button type="primary" @click="handleCreateShop">{{ $t('tenant.createShop') }}</el-button></el-row>
        <el-row :gutter="20">
          <el-col v-for="(item,key) in shopDataList" :key="key" style="margin-top:30px" :span="6">
            <el-card :body-style="{ padding: '0px' }">
              <div style="padding: 14px;">
                <h3>{{ item.name }}</h3>
                <div>{{ $t('tenant.createTime') }}： <span>{{ item.createTime }}</span></div>
                <!-- <div style="margin-top: 10px">{{ $t('tenant.productNumber') }}：<span>{{ item.shopNum }}</span></div> -->
                <div style="margin-top: 30px">{{ $t('tenant.shopStatus') }}：<span>{{ item.enable ? $t('tenant.up') : $t('tenant.down') }}</span></div>
                <div class="bottom clearfix">
                  <el-button type="text" class="button" @click="enterShopBtn(item)">{{ $t('tenant.enterInShop') }}</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getListData" />
      </div>
      <!-- 结果 -->
      <div v-if="tenantStatus==='WAITING'" class="tenantMain-result">
        <div style="width:40%">
          <div style="text-align: center">
            {{ $t('tenant.Auditing') }}
          </div>
          <div class="resultBox">
            <el-row>
              <el-col :span="8">{{ $t('tenant.tenantType') }}：</el-col>
              <el-col :span="15">{{ tenantType }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="8">{{ $t('tenant.tenantName') }}：</el-col>
              <el-col :span="15">{{ tenantUserName }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="8">{{ $t('tenant.saleProductType') }}：</el-col>
              <el-col :span="15">{{ radio === 'true' ? $t('tenant.yes') : $t('tenant.no') }}</el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :title="$t('tenant.createShop')"
      :visible.sync="dialogVisible"
      width="40%"
    >
      <div class="createShopBox">
        <el-row>
          <el-col class="label" :span="5"><span>*</span>{{ $t('tenant.shopName') }}</el-col>
          <el-col :span="18"><el-input v-model="createShopParams.name" :placeholder="$t('tenant.shopNamePlaceholder')" /></el-col>
        </el-row>
        <el-row style="margin-top:30px">
          <el-col class="label" :span="5"><span>*</span>{{ $t('tenant.shopCode') }}</el-col>
          <el-col :span="18"><el-input v-model="createShopParams.code" :placeholder="$t('tenant.shopCodePlaceholder')" /></el-col>
        </el-row>
        <el-row style="margin-top:30px">
          <el-col class="label" :span="5"><span>*</span>{{ $t('tenant.choosePayChannel') }}</el-col>
          <el-col :span="18">
            <el-checkbox-group v-model="checkList" @change="choosePayChannel">
              <el-checkbox label="alipay">{{ $t('tenant.aliPay') }}</el-checkbox>
              <el-checkbox label="wechartpay">{{ $t('tenant.weChat') }}</el-checkbox>
              <el-checkbox label="flashpay">{{ $t('tenant.flashPay') }}</el-checkbox>
            </el-checkbox-group>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{ $t('tenant.cancel') }}</el-button>
        <el-button type="primary" :loading="createBtnLoading" @click="createShopSubmit">{{ $t('tenant.create') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { tenantAddInfo, tenantDetail, updateTenant, getShop } from '@/api/tenant' // tenantDetail
// import { tenantDetail, create, list } from '@/api/user' // mock 数据
import Pagination from '@/components/Pagination'
export default {
  name: 'DashboardTenant',
  components: { Pagination },
  data() {
    return {
      radio: 'true',
      options: [
        {
          label: '机构',
          value: 'ORGAN'
        },
        {
          label: '个人',
          value: 'INDIVIDUAL'
        }
      ],
      tenantStatus: '',
      refused: false,
      userInfo: '',
      value: '',
      account: '',
      bindingAccount: '',
      tenantUserName: '',
      createLoading: false,
      dialogVisible: false,
      tenantType: '',
      tenantId: '',
      checkList: ['alipay'],
      createShopParams: {
        name: '',
        code: '',
        channel: []
      },
      createBtnLoading: false,
      shopDataList: [],
      total: 0,
      listQuery: {
        page: 1,
        limit: 3
      }
    }
  },
  async mounted() {
    const { username, phone, email } = await this.$store.dispatch('user/getRolesInfo')
    this.account = username
    phone !== '' ? this.bindingAccount = phone : this.bindingAccount = email

    // 商家信息
    this.getTenantDetail()
  },
  methods: {
    // 获取商家信息接口
    getTenantDetail() {
      var self = this
      tenantDetail().then(res => {
        console.log('=============》302结果====》', res)
        if (res.data === null || res.data === '') {
          self.tenantStatus = 'NOTFOUND'
          return
        }
        self.tenantUserName = res.data.name
        self.tenantStatus = res.data.status
        if (self.tenantStatus === 'WAITING') {
          if (res.data.type === 'ORGAN') {
            self.tenantType = '机构'
          } else if (res.data.type === 'INDIVIDUAL') {
            self.tenantType = '机构'
          }
        }
        if (self.tenantStatus === 'REJECTED') {
          self.tenantUserName = res.data.name
          self.value = res.data.type
          self.radio = String(res.data.saleCard)
          self.tenantId = res.data.id
        }
        if (self.tenantStatus === 'PASSED') {
          self.getListData()
        }
      })
    },

    // 完善商家信息
    handleCreate() {
      var self = this
      this.createLoading = true
      var saleCard = this.radio === 'true'
      var obj = {
        name: this.tenantUserName,
        saleCard: saleCard,
        type: this.value
      }
      if (self.tenantStatus === 'REJECTED') {
        var objData = {
          'config': {
            'additionalProp1': 'string',
            'additionalProp2': 'string',
            'additionalProp3': 'string'
          },
          'id': self.tenantId,
          'name': self.tenantUserName,
          'saleCard': saleCard,
          'type': self.value
        }
        updateTenant(objData).then(res => {
          // console.log('创建店铺成功', res)
          self.createLoading = false
          if (res.code === 10000) {
            // self.tenantStatus = 'WAITING'
            self.getTenantDetail()
          }
          console.log('怎么回事=====》', self.tenantStatus)
          // self.$router.push({ path: '/layout', query: this.otherQuery })
        }).catch(error => {
          self.createLoading = false
          console.log(error)
        })
      } else {
        tenantAddInfo(obj).then(res => {
          // console.log('创建店铺成功', res)
          self.createLoading = false
          self.getTenantDetail()
          // self.$router.push({ path: '/layout', query: this.otherQuery })
        }).catch(error => {
          self.createLoading = false
          console.log(error)
        })
      }
      // this.$router.push({ path: '/layout', query: this.otherQuery })
    },
    // 创建店铺
    handleCreateShop() {
      this.dialogVisible = true
    },
    // 选择支付渠道
    choosePayChannel(value) {
      console.log('value====的值等于====', value)
    },
    // 创建店铺提交
    createShopSubmit() {
      var self = this
      this.createShopParams.channel = this.checkList
      console.log('createShopSubmit参数====》', this.createShopParams)
      if (this.createShopParams.name.length > 15 || this.createShopParams.name.length < 2) {
        this.$message.warning(self.$t('tenant.shopNameErrorTip'))
        return
      }
      if (this.createShopParams.code.length > 30 || this.createShopParams.code.length < 8) {
        this.$message.warning(self.$t('tenant.shopCodeErrorTip'))
        return
      }
      if (this.checkList.length < 0) {
        this.$message.warning(self.$t('tenant.payChannerErrorTip'))
        return
      }
      this.createBtnLoading = true
      // create(this.createShopParams).then(res => {
      //   console.log(res)
      //   self.createBtnLoading = false
      //   self.dialogVisible = false
      // }).catch(error => {
      //   console.log(error)
      //   self.createBtnLoading = false
      // })
    },
    // 获取店铺列表
    getListData() {
      var self = this
      getShop().then(res => {
        console.log('=======>pppppppppp======>', res)
        self.shopDataList = res.data.contents
        self.total = res.data.total
        self.listQuery.limit = res.data.pageSize
      }).catch(error => {
        console.log(error)
      })
    },
    // 进入店铺
    enterShopBtn(item) {
      console.log('进入店铺', item.id)
      localStorage.setItem('shopId', item.id)
      this.$router.push({ path: self.redirect || '/', query: self.otherQuery })
    },
    // 退出登录
    async handleLoginOut() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login`)
    }
  }
}

</script>

<style lang="scss" scoped>
.nav {
  background: rgba(236, 235, 235, 0.966);
  padding:20px;
  .avatar {
    width: 50px;
    height: 50px;
    border: 1px solid gray;
  }
}
.tenantMain-container {
  h3 {
    padding: 15px 10px;
    background: rgba(236, 235, 235, 0.966);
  }
  .wrap {
    width:100%;
    display: flex;
    justify-content: center
  }
  .submitBtn {
    width:20%;
    margin-top:30px;
  }
}
.tenantMain-result {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
  .resultBox {
    width: 100%;
    margin-top: 30px;
    padding: 30px;
    background: rgba(236, 235, 235, 0.966);
    .el-row {
      margin-top: 30px;
    }
  }
}
.infoBox {
  margin-left: 20px;
  div:first-child {
    margin-top: 0;
  }
  div {
    margin-top: 10px
  }
}
.tenantWrap {
  padding: 25px;
}
.clearfix {
  margin-top: 20px;
  text-align: right;
}
.createShopBox {
  .el-row {
    height: 50px;
    line-height: 50px;
    display: flex;
    align-items: right;
    justify-content: center;
    .label {
      margin-right: 15px;
      text-align: right;
    }
    span {
      color: red;
      margin-right: 10px;
      font-size: 14px;
    }
  }
}
</style>
<style>
.createShopBox .el-input__inner {
    height: 50px;
}
</style>
